import React from 'react';
import {connect} from 'react-redux';
import {findDOMNode} from 'react-dom';
import styles from './Favorite.css';
import Error from '../Error/index';
import {Scrollbars} from 'react-custom-scrollbars';
import RefreshIcon from 'material-ui/svg-icons/navigation/refresh';
import {IMG_URL} from '../../../utils/constants';
import Spinner from '../Spinner/index'
class Favorite extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false
      ,//默认不显示spinner
    }
  }
  countDown = () => {
    let that = this;
    setTimeout(() => {
        that.setState({
          loading: false
        })
      }
      , 2000)
  };

  render() {
    // console.log("--------this.props--render",this.props);
    // let {dispatch} = this.props;
    // let {randomClass} = this.props;

    //展示随机课程
    // let videoList = randomClass.map((item) => {
    //   return <div id={item.id}
    //               className={styles.video}
    //               onClick={() => {
    //                 //点击获取该课程的直播链接
    //                 dispatch({type: 'user/fetchLiveVideo', payload: item.courseClass.classId});
    //                 this.setState({
    //                   targetVideoPlay: true,//播放识破，出现播放舞台
    //                 })
    //
    //               }}>
    //     <div className={styles.videoPic}>
    //       <img src={ IMG_URL + '/' + item.classPicName} id={item.id} style={{width: '100%'}}/>
    //       <div className={styles.textMaskForPic} style={{display: item.isShowMask ? '' : 'none'}}>
    //         <div>
    //           购买该课程
    //         </div>
    //         <div>
    //           请使用小程序：【环球云逸】
    //         </div>
    //       </div>
    //     </div>
    //     <div className={styles.briefIntro}>
    //       <div className={styles.briefIntro_part1}>{item.courseClass.className}</div>
    //       <div className={styles.briefIntro_part2}>￥ {item.courseClass.commonCash}</div>
    //       <div className={styles.briefIntro_part3}>
    //         <div className={styles.briefIntro_part3_item1}>
    //           <img src={require('../../../assets/ycoin.png')}/>
    //           <div>{item.courseClass.commonYcoin}</div>
    //         </div>
    //
    //         <div className={styles.briefIntro_part3_item2}>{item.courseClass.commonYcoin}人已购买</div>
    //       </div>
    //     </div>
    //   </div>
    // });
    // let _html = randomClass ?
    //   <div className={styles.haveContent}>
    //     {videoList}
    //   </div>
    //   :
    //   <div className={styles.noContent}>
    //     <Error img={require('../../../assets/followed-channels__empty.png')} content='关注你喜欢的！'/>
    //   </div>;

    return (
      <div className={styles.favorite}>
        {/*<h4>随机推荐*/}
          {/*<span onClick={() => {*/}
            {/*this.setState({*/}
              {/*loading: true*/}
            {/*});*/}
            {/*dispatch({type: 'favorite/fetchRandomClass'});*/}
            {/*this.countDown();*/}
          {/*}}>*/}
           {/*<RefreshIcon style={{color: '#cbc8d0'}}/>*/}
          {/*</span>*/}
        {/*</h4>*/}
        {/*<Scrollbars className={styles.scrollBox}>*/}
          {/*{ _html}*/}
          {/*<div>*/}
            {/*<br/>*/}
            {/*<br/>*/}
          {/*</div>*/}
        {/*</Scrollbars>*/}
        {/*<div style={{display: this.state.loading ? '' : 'none'}} className={styles.spinner}>*/}
          {/*<Spinner color="#fff" size={22}/>*/}
        {/*</div>*/}
      </div>
    )
  }
}

// const mapStateToProps = (state) => ({
//
//   randomClass: state.favorite.randomClass,
//   // randomClass: state.favorite
// });

function mapStateToProps(state) {
  console.log("-----state",state)
  return {
    randomClass: state,
  }
}


export default connect(mapStateToProps)(Favorite);
